<template>
	<el-container class="container">
		<el-header class="header"><img src="../assets/login/logo.png" ></el-header>
		<el-main class="main">
			<div class="info">
				<div class="img"><img src="../assets/login/loginindex.jpg" ></div>
				<div class="rbox">
					<div class="login" v-show="is_show">
						<div class="qrcode-icon" @click="loginIsShow"></div>
						<div class="title">账号登陆</div>
						<div class="form">
							<el-form :model="form" :rules="rules" class="demo-ruleForm">
								<el-form-item prop="username">
									<el-input v-model="form.username" prefix-icon="el-icon-user" placeholder="请输入账号"></el-input>
								</el-form-item>
								<el-form-item prop="pass">
									<el-input v-model="form.pass" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
								</el-form-item>
								<div class="passno"><a href="#">忘记密码?</a></div>
								<el-form-item>
									<el-button type="primary" class="button" @click="submitForm('ruleForm')">立即登录</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
					<div class="qrcode-box" v-show="!is_show">
						<div class="img1"></div>
						<div class="img2" @click="loginIsShow"></div>
						<div class="title"><h3>手机扫码 安全登陆</h3></div>
						<div class="qrcode"><img src="../assets/login/qrcode.jpg" alt=""></div>
						<div class="name">打开<span class="blue">微信</span>扫一扫</div>
						<div class="name">
							<span>密码登陆</span> | <span>注册账号</span>
						</div>
					</div>
				</div>
			</div>
		</el-main>
		<el-footer class="footer"> 云教务系统©2021 京ICP备17033472号-4 </el-footer>
	</el-container>
</template>

<script>
	export default {
		data(){
			return {
				form: {},
				is_show: true
			}
		},
		methods:{
			loginIsShow(){
				this.is_show = !this.is_show
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		height: 100%;
		.header{
			display: flex;
			align-items: center;
		}
		.main{
			background-color: #eee;
			display: flex;
			align-items: center;
			justify-content: center;
			.info{
				width: 1100px;
				height: 413px;
				display: flex;
				justify-content: space-between;
				.rbox{
					width: 390px;
					height: 413px;
					background-color: white;
					position: relative;
					.login{
						.qrcode-icon{
							width: 50px;
							height: 50px;
							position: absolute;
							top: 10px;
							right: 10px;
							background: url(../assets/login/qrcode_icon1.png) no-repeat;
							background-size: 50px;
						}
						.title{
							height: 80px;
							line-height: 80px;
							padding-top: 40px;
							text-align: center;
							font-size: 20px;
							font-weight: bolder;
						}
						.form{
							width: 300px;
							margin: auto;
							.passno{
								display: flex;
								flex-direction: row-reverse;
								margin-bottom: 22px;
								font-size: 14px;
							}
							.button{
								width: 100%;
							}
						}
					}
					.qrcode-box{
						.img1{
							position: absolute;
							top: 10px;
							right: 60px;
							width: 100px;
							height: 18px;
							background: url(../assets/login/passimg.png) no-repeat;
							background-size: 100px 18px;
						}
						.img2{
							position: absolute;
							top: 10px;
							right: 10px;
							width: 50px;
							height: 50px;
							background: url(../assets/login/qrcode-icon2.png) no-repeat;
							background-size: 50px;
						}
						.title{
							height: 100px;
							line-height: 100px;
							text-align: center;
						}
						.qrcode{
							width: 128px;
							height: 128px;
							margin: auto;
							img{
								width: 128px;
								height: 128px;					
							}
						}
						.name{
							text-align: center;
							height: 50px;
							line-height: 50px;
							font-size: 14px;
							.blue{
								color: blue;
							}
						}
					}
				}
			}
		}
		.footer{
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
